<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Switch setter/getter</title>

<script type="text/javascript" src="../deviceTheme.js"></script>
<script type="text/javascript" src="../../../dojo/dojo.js"	data-dojo-config="async: true, parseOnLoad: true"></script>

<script type="text/javascript">
	require([
		"dojo/_base/connect",
		"dojo/dom",
		"dojo/ready",
		"dijit/registry",
		"dojox/mobile/parser",
		"dojox/mobile",
		"dojox/mobile/compat"
	], function(connect, dom, ready, registry) {
		swOn = function() {
			var w = registry.byId("sw");
			w.set("value", "on");
		};
		swOff = function() {
			var w = registry.byId("sw");
			w.set("value", "off");
		};
		swEnable = function() {
			var w = registry.byId("sw2");
			w.set("value", "on");
		};
		swDisable = function() {
			var w = registry.byId("sw2");
			w.set("value", "off");
		};
		setDisplay = function(id) {
			var element = dom.byId(id);
			var span = dom.byId("displayMsg");

			var swId;
			// change state
			swId = registry.byId(id + "1");
			swId.set("value", (swId.get("value") == "on") ? "off" : "on");
			swId = registry.byId(id + "2");
			swId.set("value", (swId.get("value") == "on")?"off":"on");

			// display
			if (element) {
				element.style.display = "inline";
				span.innerHTML = "setting element " + id + " display = " + element.style.display;
			} else {
				span.innerHTML = "element " + id + " not found.";
			}
			swId.resize();
			setTimeout(function() {
				span.innerHTML = "";
			}, 2000);
		};

		function showMsg(spanId, msg){
			var span = dom.byId(spanId);
			span.innerHTML = msg;
			setTimeout(function() {
				span.innerHTML = "";
			}, 2000);
		}

		setSize = function (inputId, switchId, unit){
			var sw = document.getElementById(switchId),
				ip = document.getElementById(inputId);
			sw.style.width = ip.value + unit;
			registry.byId(switchId).resize();
		};

		ready(function() {
			var w = registry.byId("sw");
			w.on("stateChanged", function(value) {
				showMsg("msgArea", "onStateChanged: " + value);
			});
			w.watch("value", function(name, oldV, newV){
				showMsg("watchMsgArea", "watch : property " + name + " changed from " + oldV +" to " + newV);
			});

			var w2 = registry.byId("sw2");
			w2.on("stateChanged", function(value) {
				showMsg("msgArea2", "onStateChanged: " + value);
		});
			w2.watch("value", function(name, oldV, newV){
				showMsg("watchMsgArea2", "watch : property " + name + " changed from " + oldV +" to " + newV);
	});
		});
	});
</script>
</head>
<body style="visibility: hidden;">
	<div data-dojo-type="dojox/mobile/View" data-dojo-props='selected:true'>
		<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
			<span class="bold">Switch</span><br />
			<input type="checkbox" id="sw" name="swName" data-dojo-type="dojox/mobile/Switch" value="off"><br>
			<input type="button" onclick="swOn()" value="on">
			<input type="button" onclick="swOff()" value="off"><br />
			<span  id="msgArea"></span><br>
			<span  id="watchMsgArea"></span>
		</div>
		<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
			<span class="bold">Custom width (120px)</span><br>
			<input type="checkbox" id="sw2" name="swName" data-dojo-type="dojox/mobile/Switch" value="off" leftLabel="Enabled" rightLabel="Disabled" style="width: 120px;" ><br>
			<input type="button" onclick="swEnable()" value="enable">
			<input type="button" onclick="swDisable()" value="disable"><br />
			<span id="msgArea2"></span><br>
			<span  id="watchMsgArea2"></span>
		</div>
		<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
			<span class="bold">Custom width</span><br>
			<input type="checkbox" id="sw3" data-dojo-type="dojox/mobile/Switch" value="off"  leftLabel="Enabled" rightLabel="Disabled" style="width: 120px;"><br>
			size (absolute):<input type="text" id="swWidthAbs" value="300" maxlength="3" size="5">px
			<input type="button" onclick="setSize('swWidthAbs','sw3','px')" value="set size"><br />
			size (relative):<input type="text" id="swWidthRel" value="50" maxlength="3" size="5">%
			<input type="button" onclick="setSize('swWidthRel','sw3','%')" value="set size">
		</div>
		<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
			<span class="bold">Initial state = off</span><br />
			<input type="button" onclick="setDisplay('swOff')" value="change state and display"><br />
			<div id="swOff" style="display: none">
				<input type="checkbox" id="swOff1" name="swName" data-dojo-type="dojox/mobile/Switch" value="off"><br />
				<input type="checkbox" id="swOff2" name="swName" data-dojo-type="dojox/mobile/Switch" value="off" leftLabel="Enabled" rightLabel="Disabled" style="width: 50%;" ><br>
			</div>
		</div>
		<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
			<span class="bold">Initial state = on</span><br />
			<input type="button" onclick="setDisplay('swOn')" value="change state and display"><br />
			<div id="swOn" style="display: none">
				<input type="checkbox" id="swOn1" name="swName" data-dojo-type="dojox/mobile/Switch" value="on"><br />
				<input type="checkbox" id="swOn2" name="swName" data-dojo-type="dojox/mobile/Switch" value="on" leftLabel="Enabled" rightLabel="Disabled" style="width: 50%;" ><br>
			</div>
		</div>
		<span id="displayMsg"></span>
	</div>
</body>
</html>
